<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row :gutter="20" style="margin: 0 auto;width: 1200px;height: 70px">
          <el-col :span="2">
            <router-link to="/">
              <img src="damai.png" width="100px">
            </router-link>
          </el-col>
          <el-col :span="10">
            <el-menu mode="horizontal" @select="handleSelect">
              <el-menu-item index="1">
                <el-popover width="500px">
                  <template #reference>
                    <router-link style="text-decoration: none" to="/">
                      <el-icon>
                        <Location/>
                      </el-icon>
                      <span>{{ city }}</span>
                      <el-icon size="small">
                        <CaretBottom/>
                      </el-icon>
                    </router-link>
                  </template>
                  <div style="text-align: left;">
                    <p>当前城市:<span
                        style="color: #FF1292 ;background-color: #FFF4F8;text-decoration: none;">{{ city }}</span></p>
                    <p>热门城市:
                      <el-radio-group v-model="city" fill="#fff" text-color="#FF1292">
                        <el-radio-button class="text-radio-button" v-for="p in cityArr" :label="p"
                                         style="border: none; margin: 0 5px 0 0;">{{ p }}
                        </el-radio-button>
                      </el-radio-group>
                    </p>
                    <hr>

                  </div>
                </el-popover>
              </el-menu-item>


              <el-menu-item index="2" @click="router.push('/index')">首页</el-menu-item>
              <el-menu-item index="3" @click="router.push('/index')">分类</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="6" style="border-radius: 20px;">
            <div class="input_box" style="height: 50px">
              <el-input placeholder="请输入您要搜索的内容" prefix-icon="Search" style="height: 48px;margin: 1px 1px">
                <template #append>
                  <el-button STYLE="color: white;width: 80px;font-size: large" round>搜索
                  </el-button>
                </template>
              </el-input>
            </div>

          </el-col>
          <el-col :span="3">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-popover>
                  <template #reference>
                    <router-link to="/index" style="text-decoration: none;color: #2D2736">
                      <el-icon size="25" color="#666" style="margin-top:10px;">
                        <User/>
                      </el-icon>
                      <span class="load" style=" margin-top:10px;position:relative;bottom:6px;">登录</span>
                    </router-link>
                  </template>
                  <div style="text-align: center;">
                    <el-menu mode="vertical" @select="handleSelect"
                             style="width: 100%;border-right: none;">
                      <el-menu-item index="1">个人信息</el-menu-item>
                      <el-menu-item index="2">账号设置</el-menu-item>
                      <el-menu-item index="3">订单管理</el-menu-item>
                    </el-menu>
                  </div>
                </el-popover>
              </el-col>
              <el-col :span="12">
                <el-popover>
                  <template #reference>
                    <router-link to="" style="text-decoration: none;color: #2D2736;">
                      <el-icon size="25" color="#666" style="margin-top:10px;">
                        <Iphone/>
                      </el-icon>
                      <span class="load" style="margin-top:10px;position:relative;bottom:6px" >下载</span>
                    </router-link>
                  </template>
                  <div style="text-align: center;">
                    <img src="/download.avif" style="width: 80px">
                  </div>
                </el-popover>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-header>


      <el-main>
        <!--主体部分是可变区域-->

        <router-view/>
      </el-main>


      <el-footer style="background-color:#F8F8F8;color:#666;height: 400px;width: 100%;padding:30px;text-align: center;">
        <div style="width: 1200px;margin: 0 auto;">
          <el-button text class="footter-button">关于大麦</el-button> |
          <el-button text class="footter-button">协议及隐私权政策</el-button> |
          <el-button text class="footter-button">廉政举报</el-button> |
          <el-button text class="footter-button">联系合作</el-button> |
          <el-button text class="footter-button">招聘信息</el-button> |
          <el-button text class="footter-button">防骗秘籍</el-button>
        </div>
        <div style="text-align: left; width: 1200px;margin: 0 auto;">
          <el-row :gutter="10">
           <el-col :span="5">
             <img src="/damai.png" style="width: 167px">
           </el-col>
           <el-col :span="4">
             <img src="/download.avif" style="width: 100px">
             <p>APP下载</p>
           </el-col>
           <el-col :span="14" >
             <p style="position: relative">
               <el-button style="position: absolute;left: 0px;color: #fff;background-color: #FF1268" round="true">在线客服</el-button>
             </p>
             <br>
             <p style="position: relative">
               <el-button text class="footter-button">京ICP证031057号</el-button> |
               <el-button text class="footter-button">京ICP备11043884号</el-button> |
               <el-button text class="footter-button">京公网安备11010502037341号</el-button>
               <br>
               <el-button text class="footter-button">网络文化经营许可证 京网文[2023]1649-054号</el-button> |
               <el-button text class="footter-button">营业性演出许可证京市演587号</el-button>
             </p>
             <p>北京大麦文化传媒发展有限公司 版权所有大麦网Copyright 2003-2020 All Rights Reserved</p>
             <p>举报投诉：damai_tousu@member.alibaba.com 浙江省杭州市余杭区文一西路969号</p>
             <P>违法不良信息举报电话：020-62108294</P>
           </el-col>
          </el-row>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
import {Search} from '@element-plus/icons-vue'
import {ref} from "vue";
import router from "@/router";
const city = ref('全国');
const cityArr = ref(["北京", "重庆", "上海", "广州", "成都", "武汉", "天津", "杭州", "西安", "贵阳"]);

</script>

<style scoped>
.text-radio-button /deep/ .el-radio-button__inner {
  border: none;
  width: auto; /* 可根据需要调整宽度 */
  height: auto;
  line-height: normal;
  padding: 0; /* 去除内部间距 */
  background-color: transparent;
}

.input_box {
  width: 300px;
  margin-right: 15px;
  border-radius: 95px;
  background: #FF1268;
}

:deep(.el-input__wrapper) {
  background-color: white; /*覆盖原背景颜色，设置成透明 */
  border-radius: 95px;
  border: 0 #FF1268;
  box-shadow: 0 0 0 0px;
}

:deep(.el-input-group__append) {
  background: #FF1268;
  border-radius: 95px;
  border: 0;
  box-shadow: 0 0 0 0px;
}

.load:hover {
  color: #FF1292;
}

.el-menu-item:hover {
  color: #FF1292;
  background: #FFF4F8;
}
.footter-button:hover{
  background-color: #FFF4F8;
  color: #FF1292;
}
</style>